<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				height: 400px;
				background: #ADD8E6;
				margin: 200px auto;
				text-align: center;
				position: relative;
			}
			img{				
				margin: 100px auto;
				transition: transform 1s linear;
				position: relative;
			}
			img:first-child{
				transform: rotate(45deg);
			}
			img:nth-child(2){
				transform: rotate(-30deg);
			}
			img:nth-child(3){
				transform: rotate(1deg);
			}
			img:nth-child(4){
				transform: rotate(-20deg);
			}
			img:hover{
				transform: scale(1.5);
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/1.png"/>
			<img src="img/2.png"/>
			<img src="img/3.png"/>
			<img src="img/4.png"/>
		</div>
	</body>
</html>
